---
description: Learn how to get up and running with a simple Triplit app.
---

import {
  Callout,
  Tabs,
  Tab,
  Steps,
  Collapse,
  FileTree,
} from 'nextra-theme-docs';
import CreateTriplitAppTabs from '../components/CreateTriplitAppTabs.mdx';

# Quick Start

<Steps>
### Install Triplit to your app

#### New projects

The fast way to get started with Triplit is to use Create Triplit App which will scaffold a full stack application with Triplit.

<CreateTriplitAppTabs />

#### Existing projects

If you have an existing project, you can install the `triplit init` command to create the necessary files and folders and install the required dependencies.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  <Tab>
    ```bash copy
    npm install --save-dev @triplit/cli
    ```

  </Tab>
  <Tab>
    ```bash copy
    pnpm add --save-dev @triplit/cli
    ```

  </Tab>
  <Tab>
    ```bash copy
    yarn add --dev @triplit/cli 
    ```

  </Tab>
  <Tab>
    ```bash copy
    bun add --dev @triplit/cli 
    ```
    
    </Tab>
</Tabs>

Follow the instructions in the [React + Vite tutorial](/react-tutorial) to finish your setup. The tutorial uses React but is applicable to any framework.

### Create your Schema

<FileTree>
  <FileTree.Folder name="triplit" defaultOpen>
    <FileTree.File name="schema.ts" />
  </FileTree.Folder>
</FileTree>

You'll find a schema already setup in your project. You can modify this file to define the collections in your database. To learn more about schemas, check out the [schema guide](/schemas).

### Configure your client

<FileTree>
  <FileTree.Folder name="triplit" defaultOpen>
    <FileTree.File name="client.ts" />
  </FileTree.Folder>
</FileTree>

To sync with a Triplit server, your frontend needs a `TriplitClient`. Create a `client.ts` file in your `triplit` folder and export a client.

```typescript filename="triplit.ts" copy
import { TriplitClient } from '@triplit/client';
import { schema } from './schema';

export const triplit = new TriplitClient({
  schema,
  serverUrl: 'http://localhost:6543',
  token:
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ4LXRyaXBsaXQtdG9rZW4tdHlwZSI6InNlY3JldCIsIngtdHJpcGxpdC1wcm9qZWN0LWlkIjoibG9jYWwtcHJvamVjdC1pZCJ9.8Z76XXPc9esdlZb2b7NDC7IVajNXKc4eVcPsO7Ve0ug',
});
```

This snippet is configured to connect with a default local development server. Once you've deployed your own server or are using Triplit Cloud, you'll need to update the `serverUrl` and `token` fields and store them as environmental variables.

### Setup your dev server

Triplit has a robust local development environment that you can set up with a single command.

```bash copy
npx triplit dev
```

The `dev` command will start a local Triplit server with your schema applied. To learn more about the dev server, check out the [local development guide](/local-development).

### Insert and Query Data

To add data to your database you can use the pre-configured client to [`insert`](/client/insert) data.

```typescript
import { triplit } from '../triplit/client.ts';

await triplit.insert('todos', { text });
```

To run a query and subscribe to changes to that query, you can use [`subscribe`](/client/subscribe).

```typescript
import { triplit } from '../triplit/client.ts';

const query = triplit.query('todos').Where('completed', '=', false);

const unsubscribe = triplit.subscribe(query, (data) => {
  console.log(data);
});
```

There are also specific bindings a number of popular frameworks like [React](/frameworks/react) and [Svelte](/frameworks/svelte) that you can use to interact with your data. See the `Frameworks` section for a full list of supported integrations and details on usage.

### Deploy

When you're ready to go live, you'll need Triplit Server running. Check out the other guides to learn how you can [self host your own instance](/triplit-cloud/self-hosted-deployments).

With your server running and your `.env` setup, you can now push your schema to the server

```bash copy
npx triplit schema push
```

That's it! But there's a lot more you can do with Triplit. Check out the rest of the docs to learn more about how to define [relations in your schema](/schemas/relations), [write transactions](/client/transact), add [access control](/schemas/permissions), and more.

</Steps>
